import React, { useEffect, useState } from "react";
import request from "../utils/request";
export default function Film(props) {
  const [films, setFilms] = useState([]);
  useEffect(() => {
    request(
      "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=3739089",
      {
        headers: {
          "X-Client-Info":
            '{"a":"3000","ch":"1002","v":"5.2.1","e":"16722220591298527527370753","bc":"110100"}',
          "X-Host": "mall.film-ticket.film.list",
        },
      }
    ).then((res) => {
      console.log(res.data.data.films);
      setFilms(res.data.data.films);
    });

    return () => {};
  }, []);

  function handlerItem(id) {
    props.history.push(`/detail/${id}`);
  }
  return (
    <div>
      {films.map((item) => (
        <li key={item.filmId} onClick={() => handlerItem(item.filmId)}>
          <img src={item.poster} alt={item.name} style={{ width: 200 }}></img>
          <p>{item.name}</p>
        </li>
      ))}
    </div>
  );
}
